<template>
  <div :class="classObj" class="app-wrapper">
    <!-- <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" /> -->
    <div class="main-header-container">
      <div class="left-logo no-select">
        <h2 style="color: #fff; height: 50px; line-height: 50px; margin: 0px">
          <img src="../assets/images/logo/logo1.png" alt="" />
        </h2>
        <!-- <h2 style="color: #fff;height: 50px;line-height: 50px;margin: 0px;">崇州市智慧治理平台</h2> -->
      </div>
      <div class="headRight">
            <span class="a_button" style="right: 280px">
            <!-- <a href=" http://localhost:9527/" target="_blank"> -->
            <!-- <a href="http://10.37.190.23:18902/" target="_blank"> -->
            <a :href="screenurl" target="_blank">
              <el-button type="success">智慧大屏</el-button>
            </a>
          </span>
          <span class="a_button">
            <a :href="homeUrl">
              <el-button type="success" @click="delCookies">主页</el-button>
            </a>
          </span>
          <div class="right-menu">
            <div class="right-menu-container">
              <div class="btns-container">
                <!-- <i class="el-icon-key" title="修改密码" @click="handlePassword" />
                <i class="el-icon-download"  title="下载" @click="handleDownload"/> -->
                <img
                  :src="userImg"
                  style="width: 32px; height: 32px; top: 7px; position: relative"
                />
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link" style="color: #fff">
                    <!-- {{ userName}} -->
                    欢迎您，{{ userName}}<i class="el-icon-caret-bottom" style="font-size: 12px"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown" style="margin-top: 0px">
                    <el-dropdown-item @click.native="logout"
                      >退出登录</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </div>
      </div>
       
    </div>
    <div class="main-body-container">
      <sidebar class="sidebar-container" />
      <div class="needTagsView main-container">
        <!-- 显示服务栏 -->
        <!-- <template v-if="isShowTools">
          <Tools />
        </template> -->
        <div class="fixedHeader">
          <navbar />
        </div>
        <app-main />
      </div>
    </div>

    <ChangePassword
      :dialog-form-visible="isOpenChangePasswordDialog"
      @closeDialog="closeDialog"
      @loginOut="exitSystem"
    />

    <!-- 知识库弹窗框 -->
    <KnowledgeBase
      :dialogVisible="KnowledgeBaseDialogVisible"
      @closeDialog="KnowledgeBaseDialogVisible = false"
    />

    <!-- 知识库弹窗框 -->
    <div id="parent">
      <div v-drag id="child" @click="handleClick">
        <img src="@/assets/images/know1.png" class="image1" />
        <img src="@/assets/images/know2.png" class="image2" />
      </div>
      <!-- <img
        src="@/assets/images/know1.png"
        @click="handleClick"
        id="child"
        v-drag
      />
      <img
        src="@/assets/images/know2.png"
        @click="handleClick"
        id="child1"
      /> -->
    </div>
  </div>
</template>

<script>
import { AppMain, Navbar, Sidebar, Tools } from "./components";
import ResizeMixin from "./mixin/ResizeHandler";
import ChangePassword from "@/components/ChangePassword";
import KnowledgeBase from "@/components/knowledgeBase";
import { mapState } from "vuex";
import userImg from "@/assets/admin/layout/user.png";
import { removeToken ,setAddressUrl} from "@/utils/auth";
import { screenUrl,indexUrl,detailsUrl } from "@/utils/changeUrl";

export default {
  // 知识库点击框的拖拽事件
  directives: {
    drag(el) {
      const oDiv = el;
      // 拖拽时间标识
      let firstTime = "";
      let lastTime = "";
      document.onselectstart = function() {  //禁止选择
        // return false;
      };
      oDiv.onmousedown = function(e) {
        // 为了区分点击还是拖拽，使用时间差来判断，200毫秒内为点击，200毫秒外为拖拽，初始化为点击
        document.getElementById("parent").setAttribute("drag-flag", false);
        firstTime = new Date().getTime();

        // oDiv.offsetParent.offsetWidth - oDiv.offsetLeft - oDiv.offsetWidth
        // 表示元素距离父元素右边距的距离
        const disX =
          oDiv.offsetParent.offsetWidth -
          oDiv.offsetLeft -
          oDiv.offsetWidth +
          e.clientX;
        // oDiv.offsetTop 表示距离父元素顶边距的距离
        const disY = oDiv.offsetTop - e.clientY;
        // 设置最大右边距
        const maxRight = oDiv.offsetParent.offsetWidth - oDiv.offsetWidth;
        // 设置最大顶边距
        const maxTop = oDiv.offsetParent.offsetHeight - oDiv.offsetHeight;
        document.onmousemove = function(e) {
          // 计算当前右边距并设置
          const r = Math.min(maxRight, Math.max(disX - e.clientX, 0));
          oDiv.style.right = r + "px";
          // 计算当前顶边距并设置
          const t = Math.min(maxTop, Math.max(disY + e.clientY, 0));
          oDiv.style.top = t + "px";

          // 判断下当前时间与初始时间差，大于200毫秒则判断状态为拖拽
          lastTime = new Date().getTime();
          if (lastTime - firstTime > 200) {
            document.getElementById("parent").setAttribute("drag-flag", true);
          }
        };
        // 鼠标抬起时清除事件
        document.onmouseup = function(e) {
          document.onmousemove = null;
          document.onmouseup = null;
        };
        return false;
      };
    }
  },
  name: "Layout",
  components: {
    AppMain,
    Navbar,
    Sidebar,
    ChangePassword,
    Tools,
    KnowledgeBase
  },
  mixins: [ResizeMixin],
  data() {
    return {
      userImg: userImg,
      isOpenChangePasswordDialog: false,
      qrcodeDialog: false,
      // username: "",
      role: "",
      isShowTools: true,
      userName: "",
      positionX: 0,
      positionY: 0,
      KnowledgeBaseDialogVisible: false,
      screenurl: "",
      homeUrl: ""
    };
  },
  computed: {
    ...mapState({
      sidebar: state => state.app.sidebar,
      device: state => state.app.device,
      showSettings: state => state.settings.showSettings,
      needTagsView: state => state.settings.tagsView,
      fixedHeader: state => state.settings.fixedHeader
    }),
    pageName() {
      return this.$route.name;
    },
    // isShowTools() {
    //   return this.$route.meta.tools;
    // },
    classObj() {
      return {
        // hideSidebar: !this.sidebar.opened,
        // openSidebar: this.sidebar.opened,
        // withoutAnimation: this.sidebar.withoutAnimation,
        // mobile: this.device === 'mobile'
      };
    }
  },
  created() {
    const info = this.$store.getters.user.info;
     console.log(111111111)
    console.log(info)
    debugger
    if (info) {
      let obj = info;
      if (typeof info === "string") {
        obj = JSON.parse(info);
      }
      this.username = obj.nickName;
      if (obj.roles && obj.roles.length > 0) {
        this.role = obj.roles[0].name;
      }
      if (obj.deptId !== "8709039656768406243") {
        this.isShowTools = false;
      } else {
        this.isShowTools = true;
      }
    } else {
      const username = this.getUrlKey("userName");
      if (username) {
        this.userName = username;
      }
    }

    // this.getUserMsg();  

    let href_url = location.href;
    let url = href_url.match(/access_token=(\S*)&expireTime/)[1];
    let addressUrl = `${detailsUrl}/km/review/km_review_main/kmReviewMain.do?access_token=${url}&method=view&fdId`;
    this.screenurl = screenUrl;
    setAddressUrl(addressUrl)
    this.homeUrl = indexUrl;
  },
  methods: {
    getUrlKey(val) {
      return (
        decodeURIComponent(
          (new RegExp("[?|&]" + val + "=" + "([^&;]+?)(&|#|;|$)").exec(
            location.href
          ) || [, ""])[1].replace(/\+/g, "%20")
        ) || null
      );
    },

    // 清理cookies
    delCookies() {
      removeToken("Admin-Token");
    },

    // 知识库的点击事件
    handleClick() {
      // 点击事件触发时，判断当前状态是拖拽还是点击，若是拖拽，直接返回不继续执行
      const isDrag = document
        .getElementById("parent")
        .getAttribute("drag-flag");
      if (isDrag === "true") {
        return;
      }
      this.KnowledgeBaseDialogVisible = true;
    },

    handleDownload() {
      this.$confirm(
        "确认下载【四川省行政执法与监督综合管理系统v1.0使用手册】?",
        "提示",
        {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = "/static-view/zip/file.zip";
          link.setAttribute(
            "download",
            "四川省行政执法与监督综合管理系统v1.0使用手册.zip"
          );
          link.click();
        })
        .catch(() => {});
    },
    handleQrcode() {
      this.qrcodeDialog = true;
    },
    handlePassword() {
      this.isOpenChangePasswordDialog = true;
    },
    closeDialog() {
      this.isOpenChangePasswordDialog = false;
    },
    handleClickOutside() {
      this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
    },
    handleToScreenMap() {
      const routeUrl = this.$router.resolve({
        name: "ScreenMap"
      });
      window.open(routeUrl.href, "_blank");
    },
    handleToScreen2D() {
      const routeUrl = this.$router.resolve({
        name: "Screen2DCase"
      });
      window.open(routeUrl.href, "_blank");
    },
    handleToScreen3D() {
      const routeUrl = this.$router.resolve({
        name: "Screen3DCase"
      });
      window.open(routeUrl.href, "_blank");
    },
    handleToScreen() {
      // this.$router.push({ name: 'Screen' })
      const routeUrl = this.$router.resolve({
        name: "ScreenWatch"
      });
      window.open(routeUrl.href, "_blank");
    },
    async logout() {
      this.$confirm("确认退出登录吗?", "提示", {
        customClass: "dialog-list-data-container",
        cancelButtonClass: "btn-cls-2",
        confirmButtonClass: "btn-cls-1",
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          this.exitSystem();
        })
        .catch(() => {});
    },
    exitSystem() {
      this.$store.dispatch("user/logout");
      this.$router.push(`/login`);
      removeToken();
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";
.toScreenBtn {
  position: relative;
  top: -2px;
  margin-right: 10px;
}
#parent {
  // width: 100%;
  // height: 100%;
  // background: transparent;
  // position: fixed;
  // z-index: 99999;
  // top: 0;
  #child {
    width: 77px;
    height: 77px;
    position: absolute;
    right: 15px;
    top: 135px;
    cursor: pointer;
    border-radius: 5px;
    z-index: 999999;
    .image2 {
      position: relative;
      bottom: 57px;
      left: 10px;
      animation: mymove 3s infinite;
      animation-direction: alternate; /*轮流反向播放动画。*/
      animation-timing-function: ease-in-out; /*动画的速度曲线*/
    }
  }
}

// 定义动画
@keyframes mymove {
  0% {
    transform: scale(1); /*开始为原始大小*/
  }
  25% {
    transform: scale(1.1); /*放大1.1倍*/
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
}
.app-wrapper {
  @include clearfix;
  position: relative;
  // height: 100%;
  // width: 100%;
  background: url(./../assets/dashboard/bg.png) no-repeat right center;
  background-size: 100% 100%;

  &.mobile.openSidebar {
    position: fixed;
    top: 0;
  }
  .main-header-container {
    height: 70px;
    // box-shadow: 2px 2px 2px 3px #eee;
    position: relative;
    width: 100%;
    z-index: 1002;
    // background: url(./../assets/admin/layout/header_bg.png) no-repeat right center;
    // background-size: 100% 100%;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left-logo {
      float: left;
      margin: 5px 0px 0px 10px;
    }
    .headRight{
      display: flex;
      align-items: center;
      .right-menu {
        height: 100%;
        margin-left: 12px;
      .right-menu-container {
        display: flex;
      }
      .input-container {
        height: 70px;
        line-height: 70px;
        margin-right: 10px;
      }
      .btns-container {
        height: 70px;
        line-height: 70px;
        padding-right: 10px;
        i {
          cursor: pointer;
          color: rgba(255, 255, 255, 0.8);
          font-size: 22px;
          margin: 0px 6px;
          &:hover {
            color: rgba(255, 255, 255, 1);
          }
        }
      }
      .header-search-ipt {
        width: 120px;
        height: 32px;
        border-radius: 20px;
        border: 0px;
        padding: 5px 10px 5px 10px;
        background: #fff url("./../assets/admin/layout/search.png") no-repeat
          right 10px center;
        background-size: 21px 19px;
        font-size: 14px;
        color: #46a6ff;
        &:focus {
          outline: none;
        }
      }
      .user-panel {
        display: flex;
        height: 40px;
        line-height: 40px;
        width: 220px;
        justify-content: space-between;
        border-right: 1px solid #fff;
        margin-top: 15px;
        margin-right: 15px;
        padding-right: 15px;
        img {
          width: 30px;
          height: 30px;
          cursor: pointer;
          position: relative;
          top: 5px;
        }
        div {
          color: #fff;
          font-size: 14px;
        }
      }
      &:focus {
        outline: none;
      }
      .right-menu-item {
        display: inline-block;
        padding: 0 8px;
        height: 100%;
        font-size: 18px;
        color: #5a5e66;
        vertical-align: text-bottom;

        &.hover-effect {
          cursor: pointer;
          transition: background 0.3s;

          &:hover {
            background: rgba(0, 0, 0, 0.025);
          }
        }
      }

      .avatar-container {
        margin-right: 30px;

        .avatar-wrapper {
          margin-top: 5px;
          position: relative;

          .user-avatar {
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: 10px;
          }

          .el-icon-caret-bottom {
            cursor: pointer;
            position: absolute;
            right: -20px;
            top: 25px;
            font-size: 12px;
          }
        }
      }
    }
    }

    
  }
  .main-body-container {
    height: calc(100vh - 70px);
    overflow: hidden;
  }
}

.drawer-bg {
  background: #000;
  opacity: 0.3;
  width: 100%;
  top: 0;
  height: 100%;
  position: absolute;
  z-index: 999;
}

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - #{$sideBarWidth});
  transition: width 0.28s;
}

.hideSidebar .fixed-header {
  width: calc(100% - 54px);
}

.mobile .fixed-header {
  width: 100%;
}
.a_button {
 margin-left: 12px;
}
</style>
